<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<!-- gigs -->
		<div class="gigs">
			<div class="gigsTit">Gigs</div>
			<!-- 按钮 -->
			<div class="f f-a-c f-j-b">
				<div class="leftBtn f f-a-c">
					<div style="margin-right: 20px" @click="qieHuan(1)" :class="{ oneBtn: actInd == 1 }" class="towBtn hand">Active</div>
					<div :class="{ oneBtn: actInd == 2 }" @click="qieHuan(2)" class="towBtn hand">deleted</div>
				</div>
				<div @click="router.push('/CreateGig')" class="rigBtn hand">+ Create a Gig</div>
			</div>
		</div>
		<!-- Question -->
		<div v-if="actInd == 1" style="margin-bottom: 80px">
			<div v-for="(item, index) in list" :key="index" class="question f f-a-c f-j-b">
				<div class="lef f f-d-c">
					<div class="topTit">Question</div>
					<div class="count">{{ item.description }}</div>
				</div>
				<div class="cen f f-a-c f-j-b">
					<div class="order">
						<div class="biao f f-a-c">Orders <img src="/src/assets/user/wen.png" class="hand wenImg" alt="" /></div>
						<div class="num">{{ item.orderNum }}</div>
					</div>
					<div class="order">
						<div class="biao f f-a-c">Clicks <img src="/src/assets/user/wen.png" class="hand wenImg" alt="" /></div>
						<div class="num">{{ item.clickNum }}</div>
					</div>
					<div class="order">
						<div class="biao f f-a-c">Impressions <img src="/src/assets/user/wen.png" class="hand wenImg" alt="" /></div>
						<div class="num">{{ item.impressionsNum }}</div>
					</div>
				</div>
				<div class="rig">
					<div class="imgBox">
						<img @click="shareBtn" src="/src/assets/user/jian.png" class="hand jianImg" alt="" />
					</div>
					<div class="btn f f-a-c">
						<div @click="editXiu(index)" class="edit m-r-10 hand">Edit</div>
						<el-popconfirm @confirm="confirmFn(item)" title="Are you sure to delete this?">
							<template #reference>
								<div class="edit hand">Delete</div>
							</template>
						</el-popconfirm>
					</div>
				</div>
			</div>
		</div>
		<div v-else style="margin-bottom: 80px">
			<div v-for="(item, index) in listDet" :key="index" class="question f f-a-c f-j-b">
				<div class="lef f f-d-c">
					<div class="topTit">Question</div>
					<div class="count">{{ item.description }}</div>
				</div>
				<div class="cen f f-a-c f-j-b">
					<div class="order">
						<div class="biao f f-a-c">Orders <img src="/src/assets/user/wen.png" class="hand wenImg" alt="" /></div>
						<div class="num">{{ item.orderNum }}</div>
					</div>
					<div class="order">
						<div class="biao f f-a-c">Clicks <img src="/src/assets/user/wen.png" class="hand wenImg" alt="" /></div>
						<div class="num">{{ item.clickNum }}</div>
					</div>
					<div class="order">
						<div class="biao f f-a-c">Impressions <img src="/src/assets/user/wen.png" class="hand wenImg" alt="" /></div>
						<div class="num">{{ item.impressionsNum }}</div>
					</div>
				</div>
				<div class="rig">
					<!-- <div class="imgBox">
						<img @click="shareBtn" src="/src/assets/user/jian.png" class="hand jianImg" alt="" />
					</div> -->
					<!-- <div class="btn f f-a-c">
						<div @click="editXiu(index)" class="edit m-r-10 hand">Edit</div>
						<el-popconfirm @confirm="confirmFn(item)" title="Are you sure to delete this?">
							<template #reference>
								<div class="edit hand">Delete</div>
							</template>
						</el-popconfirm>
					</div> -->
				</div>
			</div>
		</div>
		<div v-if="actInd == 2" style="margin-bottom: 80px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { MyGigsList, DeleteGigsList, DeleteList } from "@/api/xpert.js";
	import { copy } from "@/utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { message } from "ant-design-vue";
	let statusTab = ref(1);
	let actInd = ref(1);
	let pageNum = ref(1);
	let total = ref(0);
	let list = ref([]);
	let listDet = ref([]);
	onMounted(() => {
		initList();
		window.addEventListener("scroll", handleScroll);
	});
	// 点击修改
	const editXiu = index => {
		router.push({
			path: "/CreateGig",
			query: {
				ind: index + 1
			}
		});
	};
	const currentChange = e => {
		console.log(e, "11111111111111111111");
		pageNum.value = e;
	};
	// 点击切换tabs
	const qieHuan = ind => {
		if (ind == 1) {
			initList();
		} else {
			pageNum.value = 1;
			initDet();
		}
		actInd.value = ind;
	};
	// /删除列表
	const initDet = async () => {
		let n = await DeleteList({ pageNum: pageNum.value });
		total.value = n.data.total;
		listDet.value = n.data.list;
	};
	// 点击删除
	const confirmFn = async item => {
		console.log(item, "111111111111111111111");
		let n = await DeleteGigsList({ id: item.id });
		message.success(n.msg);
		if (n.code == 200) {
			initList();
		}
	};
	// 点击复制
	const shareBtn = () => {
		const text = window.location.href;
		copy(text);
	};
	const initList = async () => {
		let n = await MyGigsList();
		list.value = n.data;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
